<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <!--form 提交表单-->
    <!--action 属性 是用来指明 form表单提交数据的URL地址
    默认值是当前 页面
    method 属性是用来 指明当前表单提交的 请求方式 默认是get， 目前
    form只支持 get 和post
    切记，如果想在form提交的时候 带上用户输入的数据，
    必须指明 input的name属性
    提交行为的触发 必须使用 type为 submit 的表单标签（input，button）
    -->
    <form action="" method="get">
        <!--label 标签用于提示 input
        for 属性 要和  input 的id 属性进行对应 否则会报错
        -->
        <label for="">用户名:</label>
        <!-- id 是唯一标识 值必须是唯一的
        value 是当前input输入的有效值
        -->
        <input type="text" name="uname" id="" value="IG.wxz">
        <br />
        <label for="">密码:</label>
        <input type="text" name="upassword">
        <br />
        <label for="">性别</label>
        <input type="text" placeholder="可选">
        <!--checked 表示选中
            disabled 表示不能选中 禁止交互
        -->
        <input type="radio" name="sex" value="m" checked disabled>男
        <input type="radio" name="sex" value="f">女
        <input type="submit">
        <!--reset 表示重置-->
        <input type="reset">
    </form>

    <form action="http://www.baidu.com/s">
        <input type="text" placeholder="关键字" name="wd">
        <button type="submit">搜索</button>
    </form>

    <hr />

    <!--多选列表-->
    <input list="footlist"/>
    <datalist id="footlist">
        <option value="苹果">苹果</option>
        <option value="2">榴莲</option>
        <option value="3">香蕉</option>
    </datalist>

    <!--input 的类型
    type 是指明 input的类型
    text 文本类型  String类型
    
    -->
    <hr />
    <input type="password" placeholder="密码">
    <hr />
    <input type="search">
    <hr />
    <input type="color">
    <hr />
    <input type="checkbox">
    <input type="radio">
    <!--性别的选中-->
    <hr />
    <input type="radio" name="sex" value="m">男
    <input type="radio" name="sex" value="f">女
    <hr />
    <input type="date">
    <input type="month">
    <input type="time">
    <input type="datetime-local">
    <!--文件上传-->
    <input type="file">

    <!--城市列表-->
    <select name="">
        <option value="郑州">郑州</option>
        <option value="上海">上海</option>
        <optgroup label="河南">
            <option value="郑州">郑州</option>
            <option value="新乡">新乡</option>
        </optgroup>
    </select>

    <hr />
    <!--对话框 多行文本框-->
    <label for="message">留言/评论/建议</label>
    <textarea name="" id="message" cols="30" rows="10" placeholder="留下宝贵的意见"></textarea>

    <!--块级标签 ： 独占一行-->
    <div style="height:100px;background-color:red;color:white">
        这是一个块级元素
    </div>
    <!--h1~h6 p table ul li ol tr form-->
    <table>
        <!--tr*3>td{第$列}*4-->
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
            <td>第4列</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
            <td>第4列</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
            <td>第4列</td>
        </tr>
    </table>
    <span style="background-color:red;width:1000px;">这是一个行内元素</span>
    <span>这是一个行内元素</span>
    <span>这是一个行内元素</span>

    <!--<a href=""></a>-->
    <!--行内块级元素
    input img  button lable textarea
    -->
    <input type="text" style="width:300px;height:100px">

    <!--盒模型-->
    <hr />
    <div style="width:300px;height:200px;background-color:red;margin-left:100px;margin-top:50px;border:10px solid pink;padding-left:50px;">
        <a href="#">百度一下就知道</a>
    </div>

</body>
</html>